<!DOCTYPE html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <title>{BEESCRM:$title}</title>
    <meta name="description" content="">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, user-scalable=no">
    <meta http-equiv="cleartype" content="on">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/assets/schoolirs/css/load.css">
    <link rel="stylesheet" href="/assets/schoolirs/css/index.css">
    <link rel="stylesheet" href="/assets/schoolirs/css/sweet-alert.css">
</head>
<body>
<div class="wraper balcony">
    <input type="hidden" id="irs_id" value="{BEESCRM:$res_id}">
    <div class="load">
        <img class="load-bee" src="/assets/schoolirs/images/load-bee.png"/>
    </div>
    <div class="top">
        <a onclick="javascript:history.go(-1);" class="iconfont icon-zuo pull-left"></a>
        <span class="store-name pull-left">预定包厢</span>
        <a href="javascript:void(0)"> </a>
    </div>

    <div class="order-info">
        <div class="form-box">
            <div class="form-list" style="border: none;margin-bottom: 10px">
                <select>
                    <option value="0">请选择用桌时长</option>
                    <option value="30">30分钟</option>
                    <option value="60">60分钟</option>
                    <option value="90">90分钟</option>
                    <option value="120">120分钟</option>
                </select>
                <span class="triangle"></span>
            </div>
        </div>
    </div>

    <input type="hidden" value="{BEESCRM:$res_id}" id="res_id">
    <input type="hidden" value="{BEESCRM:$order_id}" id="order_id">
    <input type="hidden" value="{BEESCRM:$pay_type}" id="pay_type">
    <div class="room clearfix" id="balconyBox">
        <volist name="balconys" id="vo">
            <a href="#" class="room-list text-12" data-id="{BEESCRM:$vo.balcony_id}">
                <div class="room-img">
                    <img src="{BEESCRM:$vo.balcony_img}"/>
                    <span class="label text-center">{BEESCRM:$vo.number}人桌</span>
                </div>
                <p class="text-center">{BEESCRM:$vo.balcony_name}
                    <if condition="$hasOrderBalcony eq 0">
                        <span class="iconfont  text-green"></span>
                    </if>
                    <if condition="$hasOrderBalcony eq 1">
                        <if condition="$vo.balcony_id eq $balconyId">
                            <span class="iconfont icon-checked text-green"></span>
                        <else />
                            <span class="iconfont  text-green"></span>
                        </if>

                    </if>
                </p>
            </a>
        </volist>
    </div>

    <div class="btn-box">
        <a href="javascript:void(0)" class="btn green-btn" id="choseSure">确定</a>
    </div>
</div>
<include file="../commonJS"/>
<script src="/assets/schoolirs/js/jquery-2.1.0.min.js"></script>
<script src="/assets/base/repair/js/sweetalert/lib/sweet-alert.min.js"></script>

<script>
    $(window).load(function(){
        $('.load').hide();

        var img_w = $('.room-img').width();
        $('.room-img img').css('height',img_w);
    });
    var res_id = $("#res_id").val();
    var order_id = $("#order_id").val();
    var pay_type = $("#pay_type").val();
    $(function(){

        $('.room').on('click', 'a', function (e) {
            e.preventDefault();

            var balconyId =  $(this).data('id');

            var links =document.getElementById("balconyBox").getElementsByClassName("iconfont");

            for (var j = 0; j < links.length; j++){
                if($(this).index()!=j){
                    $(links[j]).removeClass('icon-checked');
                }
            }
            var item = $(this);
            if($(this).find('p span').hasClass("icon-checked")){

                //$(this).find('p span').removeClass('icon-checked');
                $.confirm("取消预订此包厢吗？", cancelChose);
                function cancelChose() {
                    removeClass(item);
                    var data = {};
                    data.order_id = order_id;
                    data.pay_type = pay_type;
                    data.balcony_id = balconyId;

                    $.ajax({
                        'url': '/Schoolirs/Order/cancelChoseBalcony?res_id='+res_id,
                        'data': data,
                        'dataType':'json',
                        'type': 'POST',
                        'async': false,
                        success: function(data) {
                            if (data.status == 'S') {
                                location.href = data.uri;
                            } else{
                                fm.alert(data.message);
                                return false;
                            }
                        }
                    });
                }
            }else {
                //$(this).find('p span').addClass('icon-checked');
                $.confirm("确认选择此包厢吗？", sureChose);
                function sureChose() {
                    addClass(item);
                    var data = {};
                    data.order_id = order_id;
                    data.pay_type = pay_type;
                    data.balcony_id = balconyId;

                    $.ajax({
                        'url': '/Schoolirs/Order/sureBalcony?res_id='+res_id,
                        'data': data,
                        'dataType':'json',
                        'type': 'POST',
                        'async': false,
                        success: function(data) {
                            if (data.status == 'S') {
                                location.href = data.uri;
                            } else{
                                fm.alert(data.message);
                                return false;
                            }
                        }
                    });
                }
            }

        });

        function removeClass(item) {
            $(item).find('p span').removeClass('icon-checked');
        };
        function addClass(item) {
            $(item).find('p span').addClass('icon-checked');
        }
    });

</script>
</body>
</html>
